<template>
  <view class="flex-col page">
    <view class="flex-col flex-1 group_3">
    <view class="flex-col items-start group_4">
      <text class="text_4">输入新的手机号</text>
      <text class="mt-16 text_5">换绑新手机号之后，可以用新的手机号及当前密码登录</text>
    </view> 
	 <view class="flex-row items-center section">
        <text class="font_2 text_6">+86</text>
        <image class="image_6" src="../../static/images/d0a6c047c02e9f286fe93d2b72706f1e.png" />
        <input class="font_2 text_7" name="newAccount" v-model="newAccount" maxlength="11" placeholder="请输入手机号" />
      </view>
	  
	  <view class="flex-row items-center section_2">
	     <input class="font_3 text_6" name="code" v-model="code" maxlength="6"  placeholder="请输入验证码" />
	     <text type="default" class="font_3 text_7" v-bind:disabled="btndisabled" @click="sendCode()">{{codeMsg}}</text>
	   </view>
	   
    <view class="flex-col justify-start items-center button">
    	<text class="font_2 text_8" @click="register()">确定</text>
    </view>
	
	 <!-- <view class="uni-btn-v section_2">
		  <button formType="submit" class="font_2 text_9" @click="register()">确定</button>
	  </view> -->
	  
	  
    </view>
  </view>
</template>

<script>
	import {_register} from '@/service/user.js';
	import {_registercode} from '@/service/user.js';
	import {_SwitchCellAccount} from '@/service/user.js'
  export default {
    components: {},
    props: {},
    data() {
      return {
		  code:'',
		  oldAccount: '17805088097',
		  newAccount: '',
		  t:60,
		  codeMsg:'获取验证码',
		  btndisabled:false,
		  judgecode:''
	  };
    },

    methods: {
		// 验证手机号码
		validPhone(newAccount) {
			let valid = false;
			let rule = /^1[3456789]\d{9}$/;
			if (newAccount === '') {
				this.$api.msg('手机号码不能为空');
			} else if (!rule.test(this.newAccount)) {
				this.$api.msg('请输入正确的手机号码');
			} else {
				valid = true;
			}
			return valid;
		},
		
		// 验证是否为空
		validIsEmpty (str, tip) {
			if (str === '') {
				this.$api.msg(`${tip}不能为空`);
				return false;
			}
			return true;
		},
		// 验证码是否正确
		async validIsTrue(code){
			let data = {
				account_user:this.newAccount,
				verifyCode:this.code
			}
			let res = await _register(data)
			console.log(res)
			if (res.flag == false){
				this.$api.msg(res.message);
				this.judgecode = false
			}else{
				this.judgecode = true
			}
		},
		timewait(t){
			const _this = this;
			setTimeout(()=>{
				if(t>=0){
					// _this.codeMsg = t + '秒后点击';
					_this.codeMsg = t + 's';
					t--;
					_this.timewait(t);
				}else{
					_this.codeMsg = '获取验证码';
					t=60;
					_this.btndisabled = false;
				}
			},1000)
		},
		async sendCode(){
			//验证手机号码是否合法
			if(!(/^1[13456789]\d{9}$/.test(this.newAccount))){
				uni.showToast({
					title:'手机号码不规范',
					icon:'none'
				});
				return;
			}			
			let data = { 
				account_user: this.newAccount , 
			}
			let res = await _registercode(data)
			this.$api.msg(res.message)
			console.log(res)
			this.timewait(60)
			this.btndisabled = true ;
		},
		async register(){
				if(this.validPhone(this.newAccount) && this.validIsEmpty(this.code,"验证码") && this.validIsTrue(this.code)){
						let data = {
							oldAccount:this.oldAccount,
							newAccount:this.newAccount,
						}
						if (data.flag == true){
							uni.showToast({
								title:'	换绑成功',
								icon:'none'
							})
						}else{
							setTimeout(()=>{
								uni.hideLoading();
								this.$api.msg(data.message);
							}, 500)
						}
					}
				}
		}
  };
</script>

<style scoped lang="css">
  .mt-39 {
    margin-top: 81.25rpx;
  }
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .text_4 {
    color: #383838;
    font-size: 33.33rpx;
    font-family: AlibabaPuHuiTi;
    font-weight: 700;
    line-height: 50rpx;
	margin-left: 3%;
  }
  .text_5 {
    color: #a6a6a6;
    font-size: 25rpx;
    font-family: AlibabaPuHuiTi;
    line-height: 50rpx;
	margin-top: 3%;
	 margin-left: 3%;
  }
  .group_3 {
    padding: 50rpx 41.67rpx 745.83rpx 47.92rpx;
    overflow-y: auto;
  }
  .section {
    margin: 0 12.5rpx;
    padding: 18.75rpx 26.17rpx 12.5rpx;
    background-color: #e5e5e5;
    border-radius: 10.42rpx;
  }
  .section_2 {
    margin: 0 12.5rpx;
    padding: 14.75rpx 26.17rpx 8.5rpx;
    background-color: #e5e5e5;
    border-radius: 10.42rpx;
	margin-top: 10%;
  }
  .section_3 {
    margin: 0 12.5rpx;
    padding: 18.75rpx 26.17rpx 12.5rpx;
    background-color: #138f87;
    border-radius: 10.42rpx;
  	margin-top: 10%;
  }
  
  .button {
    padding: 25rpx 0;
    background-color: #138f87;
    border-radius: 56.25rpx;
    margin-top: 13%;
    .text_8 {
      color: #ffffff;
    }
  }
  
  .font_2 {
    font-size: 33.33rpx;
    font-family: AlibabaPuHuiTi;
    color: #a6a6a6;
  }
  .text_6 {
    line-height: 53.79rpx;
  }
  .image_6 {
    margin-left: 9.25rpx;
    width: 41.67rpx;
    height: 62.5rpx;
  }
  .text_7 {
    margin-left: 34.79rpx;
    line-height: 80.56rpx;
  }
  .text-wrapper {
    padding: 27.71rpx 0 32.06rpx;
    background-color: #138f87;
    border-radius: 56.25rpx;
  }
  .text_8 {
    color: #ffffff;
    font-size: 37.5rpx;
    font-family: WenQuanYiMicroHeiMono;
    line-height: 33.98rpx;
  }
</style>